<!DOCTYPE html>
<html>
<head>
    <title>无限旋转动画示例</title>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div id="myElement"></div>
<script>
    let element = document.getElementById('myElement');
    let angle = 0;
    function animate() {
        angle += 0.1;
        element.style.transform = 'rotate(' + angle + 'deg)';
        // 就是这里在不停调用(无限循环)
        requestAnimationFrame(animate);
    }
    /*
    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
    该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
     */
    requestAnimationFrame(animate);
</script>
</body>
</html>
